<template>
     <div class="search">
        <div class="block">
            <el-cascader v-model="val" placeholder="请选择老师" :options="options" filterable @change="handleItemChange"></el-cascader>
           <!-- 后台接口搜索关键字 -->
            <!-- <h1>{{val[0]}}</h1>-->
            <!-- <h1>{{val[1]}}</h1>  -->
        </div>
            <div class='tabMsg'>
              <table class="gridtable" v-show="isShow">
                <thead>
                  <tr >
                    <th style="border:1px solid black">姓名</th>
                    <th style="border:1px solid black">图片</th>
                    <th style="border:1px solid black">操作</th>
                  </tr>
                </thead>
                <tbody> 
    
                 <tr  >
                    <!-- <td>{{i}}</td> -->
                    <td><h4>{{teac}}</h4></td>
                     <td><img :src="icon" alt=""> </td> 
                  <td> 
                      <p>
                       <el-button class="btn" type="text" @click="open5">修改</el-button>                     
                      </p>
                 </td>
                </tr>
                </tbody>
              </table>
            </div>
             <!-- <h1>{{teacList[0].clas.teac}}</h1>  -->
             <!-- <h1>{{teacList[0].clas.icon}}</h1> -->
     </div>
</template>
<script>
import TeacPhotoComponent from './TeacPhotoComponent'
    export default{
        data(){
            return {
                // 请求后的年级班级信息===》options
              myData: [],
                // 搜索框渲染数据
             options: [],
                //年级和班级对象
                vals:[],
                //gradId clasId
                val: [],  
                //学生列表
                teac:'', 
                icon:'',
                isShow:false               
            }
        },
        methods:{
            //搜索改变时触发的函数
            handleItemChange() {
                  this.vals=getCascaderObj(this.val, this.options); 
                  
                  //console.log(this.val); 
                  //console.log(this.options) ; 
                  this.requsetGrd();  
                  this.isShow=true;

                },
            handleEdit(index, row) {
                     console.log(index, row);
                 },
            handleDelete(index, row) {
                    console.log(index, row);
            },
            //请求班级列表函数
            requsetGrd(){
                this.teac='';
                this.icon='';
               var url="http://125.210.160.93:8080/SmEdu/port/scho/studList";
               this.$http.post(url,{clasId:this.val[1]}).then((res)=>{
                 console.log(res);
                 console.log(res.data.body);
                 this.teac=res.data.body[0].clas.teac;
                 this.icon=res.data.body[0].clas.teacIcon;
               }).catch((err)=>{
                 console.log(err);
               })
            },
            //修改老师信息函数
               open5() {
                    const h = this.$createElement;
                    this.$msgbox({
                    title: '修改老师信息',
                     message: h('p', null, [
                        h('teac-photo-component',null),[
                          h('h6',this.val[1])
                        ]
                    ]),                     
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center:true,
                    // type:'info',
                    callback(){
                        console.log(1)
                    },
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done(console.log(2222));
                             this.requsetGrd(); 
                            setTimeout(() => {
                            instance.confirmButtonLoading = false;
                            }, 300);
                        }, 1000);
                        } else {
                        done(console.log(33333));
                        }
                    }
                    }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                    });
                },
             },
            async mounted(){
              //console.log('mounted')
              var url="http://125.210.160.93:8080/SmEdu/port/scho/gradList";
              var {data} =  await this.$http.post(url,{schoId:19}) 
              console.log(data)
              for(var i=0 ;i< data.body.length;i++){
                this.myData.push(
                  {
                    value: data.body[i].id,
                    label: data.body[i].name,
                    children: []
                  })
              }

          this.myData.forEach(async (element,index) => {
              //console.log('value1:'+element.value)
               //console.log('value1:'+element.value)
              var url="http://125.210.160.93:8080/SmEdu/port/scho/clasList";
              var {data} =  await this.$http.post(url,{gradId: element.value})
               //console.log('value2:'+element.value)
              // console.log(index);
              //console.log(data);
              for(var i=0 ;i < data.body.length;i++){
                    this.myData[index].children.push(
                          {
                            value: data.body[i].id,
                            label: data.body[i].name
                          }
                      )
              }            
          });
      
      this.options = this.myData;
           
    },
       
        props:['holderName'],
        components:{
            TeacPhotoComponent
        }
        
    }

    //options[{label},{label},{label},{label}]=arr[1,2,3,4];
    
   function  getCascaderObj(val,opt) {
            return val.map(function (value, index, array) {
                for (var itm of opt) {
                    if (itm.value == value) { opt = itm.children; return itm; }
                }
                return null;
            });
        }
    
</script>
<style scoped>
  option{
    width:100%,
    /* height:200px; */
  }
  /* table,table>tr,tabel>td{
    border:1px solid black !important;
  } */
  table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
  margin:0 auto;
  width:90%;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
table.gridtable td img{
  width:100px;
  height: 100px;
  border-radius: 50%;
}
.search .tabMsg{
  height:500px;
  /* border:1px solid red; */
  overflow: hidden;
  overflow-y:scroll;
  margin :1rem auto;
}
</style>